<template>
	<view class="info-display">
		<view class="label">{{ label }}</view>
		<view class="enter-info">
			<view class="info" v-if="showName">
				<up-input
					placeholder="姓名"
					border="none"
					placeholder-class="ipt-placeholder"
					v-model="name"
					@blur="(e) => handleBlur('name', e)"
				></up-input>
			</view>
			<view
				class="info"
				:class="{ placeholder: !modelValue?.id_type }"
				v-if="showIdType && showId"
				@click="togglePickerShow"
			>
				{{ idTypeText }}
				<image :src="`${imgBaseUrl}arrow-right-gray.png`" class="icon-right" />
			</view>
			<view class="info" v-if="showId">
				<up-input
					:type="idType === 10 ? 'idcard' : 'text'"
					placeholder="证件号"
					border="none"
					placeholder-class="ipt-placeholder"
					v-model="idValue"
					@blur="(e) => handleBlur('id_value', e)"
				></up-input>
			</view>
			<view class="info" v-if="showMobile">
				<up-input
					type="number"
					placeholder="手机号"
					border="none"
					placeholder-class="ipt-placeholder"
					v-model="mobile"
					@blur="(e) => handleBlur('mobile', e)"
				></up-input>
			</view>
		</view>
		<view class="operation" @click="openPopup">{{ hasValue ? "更换" : "选择" }}</view>
		<template v-if="showId">
			<up-picker
				:show="pickerShow"
				:columns="[idTypeColumn]"
				key-name="label"
				close-on-click-overlay
				@close="togglePickerShow"
				@cancel="togglePickerShow"
				@confirm="handlePickerConfirm"
			></up-picker>
		</template>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import type { ContactsInfo } from "@/types/ticket"
const imgBaseUrl = inject("imgBaseUrl")

interface InfoDisplayProps {
	modelValue: Partial<ContactsInfo> | null
	idx?: number
	label: string
	showIdType?: boolean
	showName: boolean
	showId: boolean
	showMobile: boolean
	// tourist: 游客 contact: 联系人
	type: "tourist" | "contact"
}

const props = withDefaults(defineProps<InfoDisplayProps>(), {
	showIdType: true,
})
const emit = defineEmits(["openPopup", "update:modelValue"])

const pickerShow = ref(false)

const idTypeColumn = [
	{
		label: "身份证",
		value: 10,
	},
	{
		label: "护照",
		value: 20,
	},
	{
		label: "港澳通行",
		value: 30,
	},
	{
		label: "永居证",
		value: 40,
	},
	{
		label: "军官证",
		value: 50,
	},
	{
		label: "其他",
		value: 60,
	},
]

const name = computed({
	get() {
		return props.modelValue?.name
	},
	set(val) {
		emit("update:modelValue", {
			...(props.modelValue || {}),
			name: val,
		})
	},
})

const idType = computed({
	get() {
		return props.modelValue?.id_type
	},
	set(val) {
		emit("update:modelValue", {
			...(props.modelValue || {}),
			id_type: val,
		})
	},
})

const idValue = computed({
	get() {
		return props.modelValue?.id_value
	},
	set(val) {
		emit("update:modelValue", {
			...(props.modelValue || {}),
			id_value: val,
		})
	},
})

const mobile = computed({
	get() {
		return props.modelValue?.mobile
	},
	set(val) {
		emit("update:modelValue", {
			...(props.modelValue || {}),
			mobile: val,
		})
	},
})

const idTypeText = computed(() => {
	const label = idTypeColumn.find((item) => item.value === props.modelValue?.id_type)?.label

	if (!label) return "证件类型"

	return label
})

const hasValue = computed(() => {
	if (!props.modelValue) return false

	return !!Object.values(props.modelValue).filter(Boolean).length
})

const openPopup = () => emit("openPopup", props.idx)

const togglePickerShow = () => {
	pickerShow.value = !pickerShow.value

	uni.$emit("submit-order-popup-visible", pickerShow.value)
}

const handlePickerConfirm = (data: { value: typeof idTypeColumn }) => {
	idType.value = data.value[0].value

	if (props.type === "tourist") {
		uni.$emit("first-tourist-info-change", { id_type: data.value[0].value })
	}

	togglePickerShow()
}

const handleBlur = (key: string, value: string) => {
	if (props.type === "tourist") {
		uni.$emit("first-tourist-info-change", { [key]: value })
	}
}
</script>

<script lang="ts">
export default {
	options: { styleIsolation: "shared" },
}
</script>

<style lang="scss" scoped>
.info-display {
	display: flex;
	align-items: center;
	padding: 40rpx 0;

	.label {
		font-size: 28rpx;
		color: #86909c;
		line-height: 40rpx;
	}

	.enter-info {
		flex: 1;
		margin: 0 40rpx;
		font-size: 28rpx;
		color: #c9cdd4;
		line-height: 40rpx;

		.info {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;
			font-size: 28rpx;
			color: #1d2129;
			line-height: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.icon-right {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		.placeholder {
			font-size: 28rpx;
			color: #c9cdd4;
			line-height: 40rpx;
		}

		::v-deep .ipt-placeholder {
			font-size: 28rpx;
			color: #c9cdd4;
			line-height: 40rpx;
		}
	}

	.operation {
		font-size: 28rpx;
		color: #bc8400;
		line-height: 40rpx;
	}
}
</style>
